<template>
	<div class="coach-detail">
		<div class="header">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item v-for="(item, index) in coachMienFile" :key="index">
					<img :src="item" class="swiper-item"/>
        </swiper-item>
      </swiper>
		</div>
		<div class="main">
			<div class="coach-info">
				<div class="avatar"><img :src="portraitPictureFile ? portraitPictureFile : 'https://newmefit.cn/gym-center-2/1922227827956064256/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250513174951.png'"></div>
				<div class="info">
					<h3>{{ coachDetail.userName }}</h3>
					<uni-rate v-model="coachDetail.starLevel" :readonly="true"/>
					<p>{{ storeName }}</p>
				</div>
			</div>
			<div class="coach-data">
				<p>身高：{{ coachDetail.stature ? coachDetail.stature : '' }}cm 体重：{{ coachDetail.weight ? coachDetail.weight : '' }}kg</p>
				<p style="display: flex;">教授课程：<em v-for="(item, index) in teachCourseList" :key="index">
					<span v-if="index < 2">{{ item.courseName }}</span>
					<span v-if="index == 2 && teachCourseList.length > 2">等{{ teachCourseList.length }}个教程</span>
				</em></p>	
			</div>
			<h1>教练简介</h1>
			<div class="coach-desc">
				{{ coachDetail.introduce ? coachDetail.introduce : '暂无介绍' }}
			</div>
			<h1>教练证书</h1>
			<div class="course-case">
				<div class="case-item" v-for="(item,index) in coachCertificateFile" :key="index">
					<img :src="item" mode="aspectFit" @click="previewImage(index, item)">
				</div>
			</div>
			<h1>授课案例</h1>
			<div class="course-case">
				<div class="case-item" v-for="(item,index) in teachCaseFile" :key="index">
					<img :src="item" mode="aspectFit" @click="previewImage(index, item)">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { coachDetailGet, getPublicUrl, listPublicUrl, coursePageList } from '@/api/manageApi'
import {getStore, setStore} from '@/util/service'
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			rateValue: 2,
			coachDetail: {},
			portraitPictureFileId: '',
			portraitPictureFile: '',
			faceImageFileId: '',
			faceImageFile: '',
			coachMienFile: [
				'../../static/h3.jpg'
			],
			coachCertificateFile: [],
			teachCaseFile: [],
			storeName: '',
			teachCourseList: [],
			courseData: [],
			userId: ''
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	onLoad(option) {
		// var teachCourseList = JSON.parse(getStore('teachCourseList'))
		// this.teachCourseList = teachCourseList
		this.storeName = option.storeName
		this.userId = option.id
		this.getCourseList()
	},
	methods: {
		previewImage (index, item) {
			uni.previewImage({
        current: index, 
        urls: [item]
      })
		},
		// 获取推荐课程列表
		getCourseList () {
      var params = {
				current: 1,
        size: 1000,
        courseType: ''
      }
      coursePageList(params).then(res => {
        if (res.code == '200') {
          var data = res.data.records
          this.courseData = data
					this.getCoachDetail(this.userId)
        }
      })
    },
		getCoachDetail (id) {
      var params = {
        userId: id
      }
      coachDetailGet(params).then(res => {
        // console.log(res)
        if (res.code == '200') {
          var data = res.data
          this.coachDetail = data
					this.portraitPictureFileId = data.portraitPictureFileId
          getPublicUrl({fileId:this.portraitPictureFileId}).then(response => {
            this.portraitPictureFile = response.data
          })
          this.faceImageFileId = data.faceImageFileId
          getPublicUrl({fileId:this.faceImageFileId}).then(response => {
            this.faceImageFile = response.data
          })
					if(data.coachMienFileIds.length > 0){
						this.coachMienFile = []
					}
          listPublicUrl(data.coachMienFileIds).then(res => {
            for (var key in res.data) {
              this.coachMienFile.push(res.data[key])
            }
          })
          listPublicUrl(data.coachCertificateFileIds).then(res => {
            for (var key in res.data) {
              this.coachCertificateFile.push(res.data[key])
            }
          })
          listPublicUrl(data.teachCaseFileIds).then(res => {
            for (var key in res.data) {
              this.teachCaseFile.push(res.data[key]) 
            }
          })
					var selectCourseData = []
          this.courseData.forEach((item, index) => {
            if (data.courseIds.indexOf(item.id) >= 0) {
              selectCourseData.push(item)
            }
          })
					this.teachCourseList = selectCourseData
        }
      })
    }
	}
}
</script>

<style lang="scss">
.coach-detail {
	background: #fff;
	.header{
		width: 750rpx;
		height: 450rpx;
		.swiper{
			width: 100%;
			height: 100%;
		}
		.swiper-item {
      display: block;
			width: 100%;
			height: 100%;
      line-height: 450rpx;
      text-align: center;
    }
	}
	.main{
		width: 100%;
		min-height: 160rpx;
		box-shadow: 0rpx -10rpx 8rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 0rpx 60rpx 0rpx 0rpx;
		padding: 32rpx 36rpx;
		box-sizing: border-box;
		background: #fff;
		margin-top: -60rpx;
		position: relative;
		z-index: 10;
		.coach-info{
			display: flex;
			.avatar{
				width: 112rpx;
				height: 112rpx;
				img{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.info{
				margin-left: 20rpx;
				h3{
					font-size: 30rpx;
					color: #1E1E1E;
					margin-bottom: 5rpx;
				}
				p{
					margin-top: 5rpx;
					margin-bottom: 19rpx;
					font-size: 24rpx;
					color: #838383;
				}
			}
		}
		.coach-data{
			width: 100%;
			height: 124rpx;
			background: #FFF1E9;
			border-radius: 10rpx;
			padding: 23rpx 28rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #1E1E1E;
			line-height: 44rpx;
			span{
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 12rpx;
				display: inline-block;
				background: rgba(255,255,255,0);
				border-radius: 5rpx;
				border: 1px solid #FF7935;
				font-size: 22rpx;
				color: #FF5A20;
				margin-right: 10rpx;
			}
		}
		h1{
			margin-top: 36rpx;
			margin-bottom: 25rpx;
			font-size: 28rpx;
			color: #1E1E1E;
		}
		.coach-desc{
			font-size: 26rpx;
			color: #575757;
			line-height: 38rpx;
		}
		.coach-img{
			display: flex;
			justify-content:space-between;
			flex-wrap: wrap;
			.img-item{
				width: 206rpx;
				height: 280rpx;
				line-height: 280rpx;
				background: #F7F7F7;
				border: 3px solid #E7E7E7;
				img{
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
				}
			}
		}
		.course-case{
			display: flex;
			justify-content:space-between;
			flex-wrap: wrap;
			.case-item{
				width: 100%;
				// text-align: center;
				img{
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
	}
}
</style>
